<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>

    <%--    添加业主--%>
    <meta charset="utf-8">
    <title>公告管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layuiadmin/style/admin.css" media="all">

    <style>
        .notice-btn{
            display: flex;
            justify-content: space-between;
        }

        /*添加页面*/
        #selectBox {
            display: flex;
        }

        #updateHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #updateMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        #addHiddenBox {
            position: absolute;
            left: 10%;
            top: 10%;
            display: none;
            width: 80%;
            height: 80%;
            margin: auto;
            background-color: #FAFAFA;

        }

        #addMainBox {
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgba(67, 67, 67, .5);

        }

        .layui-upload-list {
            display: block;
            margin: 10px 0;
            width: 102px;
            height: 102px;
            border: black 1px solid;
        }

        #demo1{
            display: block;
            width: 102px;
            height: 102px;
        }
        /**/

    </style>


</head>
<body>

<table class="layui-hide" id="noticeList" lay-filter="noticeList"></table>


<div id="addMainBox">
    <div id="addHiddenBox">
        <form class="layui-form" > <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
            <div class="layui-form-item" style="text-align: center">
<%--                <label class="layui-form-label">标题</label>--%>
                <div class="layui-input-block">
                    <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <input type="text" name="content" style="display: none" id="content" class="layui-input">
            <div class="layui-form-item layui-form-text">
<%--                <label class="layui-form-label">公告</label>--%>
                <div class="layui-input-block">
                    <div id="wangEditor">
<%--                        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>--%>
                    </div>
                </div>
            </div>
<%--            <button type="button" id="btn">获取内容</button>--%>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="noticeBtn">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button type="button" class="layui-btn layui-btn-primary" id="addReturnWindows">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>




<%--按钮样式展示--%>
<%--<button type="button" class="layui-btn layui-btn-fluid notice-btn" style="width: 100%">--%>
<%--    <span style="line-height: 200%">2020-2-1</span>--%>
<%--</button>--%>

<%--<a href="${pageContext.request.contextPath}/notice/viewNotice?id=1">i安吉</a>--%>
<script src="${pageContext.request.contextPath}/wangEditor/js/wangEditor.min1.js"></script>
<script src="${pageContext.request.contextPath}/layuiadmin/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            admin = layui.admin,
            laydate = layui.laydate
            ,upload = layui.upload
        var E = window.wangEditor
        var editor = new E("#wangEditor")
        // 或者 const editor = new E(document.getElementById('div1'))




        // 配置 server 接口地址
        editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';

        editor.config.uploadFileName = 'file';



        // 默认情况下，显示所有菜单
        editor.config.menus = [
            'head',
            'bold',
            'fontSize',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'indent',
            'lineHeight',
            'foreColor',
            'backColor',
            'link',
            'list',
            'todo',
            'justify',
            'quote',
            'emoticon',
            'image',
            // 'video',
            'table',
            'code',
            'splitLine',
            'undo',
            'redo',
        ]

        editor.config.uploadImgHooks = {
            // 上传图片之前
            // before: function(xhr) {
            //     console.log(xhr)
            //
            //     // 可阻止图片上传
            //     return {
            //         prevent: true,
            //         msg: '需要提示给用户的错误信息'
            //     }
            // },
            // 图片上传并返回了结果，图片插入已成功
            success: function(xhr) {
                // console.log('success', xhr);
                $("#content").val(editor.txt.html());
                // console.log(editor.txt.html());
            },
            // // 图片上传并返回了结果，但图片插入时出错了
            // fail: function(xhr, editor, resData) {
            //     console.log('fail', resData)
            // },
            // // 上传图片出错，一般为 http 请求的错误
            // error: function(xhr, editor, resData) {
            //     console.log('error', xhr, resData)
            // },
            // // 上传图片超时
            // timeout: function(xhr) {
            //     console.log('timeout')
            // },
            // // 图片上传并返回了结果，想要自己把图片插入到编辑器中
            // // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
            // customInsert: function(insertImgFn, result) {
            //     // result 即服务端返回的接口
            //     console.log('customInsert', result)
            //
            //     // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
            //     insertImgFn(result.data[0])
            // }
        }

        editor.create();

        $("#btn").click(function () {
            var html = editor.txt.html();
            console.log(html)
        })

        //打印富文本内容
        // $(".notice-btn").click(function (d) {
        //     console.log(1);
        //     console.log(d);
        // })

        // function template(d){
        //     var html = '';
        //     html += '<button ';
        //     html += 'data-num=';
        //     html += d.id;
        //     html += ' type="button" ';
        //     html += ' class="layui-btn layui-btn-fluid notice-btn" style="width: 100%"> ';
        //     html += '<span style="line-height: 200%">';
        //     html += d.title;
        //     html += '</span>';
        //     html += '<span style="line-height: 200%">';
        //     html += d.createTime;
        //     html += '</span>';
        //     html += '</button>';
        //     return html;
        //
        // }
        <%--<a href="${pageContext.request.contextPath}/notice/viewNotice?id=1">i安吉</a>--%>
        function template(d){
            var html = '';
            html += '<a ';
            html += 'href=';
            html += '${pageContext.request.contextPath}/notice/viewNoticeUser?id=';
            html += d.id;
            html += ' class="notice-btn" style="width: 100%"> ';
            html += '<span style="line-height: 200%">';
            html += d.title;
            html += '</span>';
            html += '<span style="line-height: 200%">';
            html += d.createTime;
            html += '</span>';
            html += '</a>';
            return html;

        }
        
        function noticeRefresh() {
            notice.reload();
        }

        //第一个实例
        var notice = table.render({
            elem: '#noticeList'
            // ,height: 312
            ,url: '${pageContext.request.contextPath}/notice/noticeList' //数据接口
            , request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            page: true,
            limits: [10, 15, 20]
            ,cols: [[ //表头
                // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                {field: 'title', title: '公告', templet: function (d) {
                        return template(d);
                    }}
                // ,{field: 'content', title: '性别', width:80, sort: true}
                // ,{field: 'contentPicturePath', title: '城市', width:80}
                // ,{createTime: 'createTime', title: '签名', width: 177}
                // ,{updateTime: 'updateTime', title: '积分', width: 80, sort: true}
            ]]
        });

        form.on('submit(noticeBtn)', function(data){
            $("#content").val(editor.txt.html());
            var data = data.field
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            $.ajax({
                url: "${pageContext.request.contextPath}/notice/insertNotice",
                type: "post",
                data: JSON.stringify(data),
                contentType: 'application/json',
                processDate: false,
                success: function (res) {
                    console.log("success");
                    console.log(res);
                    if (res.code == 0){
                        location.href = "${pageContext.request.contextPath}/notice/notice";
                    }else {
                        layer.msg(res.msg);
                    }
                    // userListTable.reload();
                    return;
                }
            })

        });



        //头部工具栏监听事件
        table.on('toolbar(noticeList)', function (obj) {
            // console.log("**********************")
            // console.log(obj);
            // console.log("**********************")
            // var checkStatus = table.checkStatus(obj.config.id);
            // console.log(checkStatus);
            var checkStatus = table.checkStatus('noticeList');
            var checkedData = checkStatus.data
            console.log(checkStatus)
            switch (obj.event) {
                case 'add':
                    console.log(obj);
                    // layer.msg('添加');
                    /*打开添加页面*/
                    $("#addMainBox").css("display", "block");
                    $("#addMainBox").css("z-index", "9999999");
                    $("#addHiddenBox").css("display", "block");
                    break;
                case 'delete':
                    // layer.msg('删除');
                    if (checkedData.length < 1){
                        layer.msg("请选择数据后在操作");
                        return;
                    }
                    var ids = '';
                    var id = "";
                    for (var i = 0; i < checkedData.length; i++) {
                        var notice = checkedData[i];
                        ids += notice.id;
                        ids += ',';
                    }

                    id = ids.substring(0,ids.length-1)

                    layer.confirm('真的要删除么', function (index) {
                        if (index > 0){
                            $.ajax({
                                url: "${pageContext.request.contextPath}/notice/deleteNotice?id=" + id,
                                type: "get",
                                success: function (res) {
                                    console.log("success");
                                    console.log(res);
                                    if (res.code == 0){
                                        location.href = "${pageContext.request.contextPath}/notice/notice";
                                    }else {
                                        layer.msg(res.msg);
                                    }
                                    // userListTable.reload();
                                    return;
                                }
                            })
                            layer.close(index);
                        }
                    })
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
        /*关闭添加页面*/
        $("#addReturnWindows").click(function addReturnWindows() {
            $("#addMainBox").css("display", "none");
            $("#addHiddenBox").css("display", "none");
        })

    });
</script>
</body>
</html>
